<template>
		<view>
			<view class="head-bg padding-lr">
				<view class="user-info flex align-center justify-between">
					<view class="flex align-center">
						<button  class="round head-img" style="padding: 0px !important;" @click="onChooseAvatar">
						  <image class="avatar-img" :src="baseUrl+userInfo.avatar"></image>
						</button> 
						<view class="mobile" > 
							<view class="mobile_title" @click="showModifyUserInfo">
								<text>{{userInfo.realname}}</text>
								<uni-icons type="compose" style="margin-left: 10rpx;"></uni-icons>
							</view>
							<view>{{userInfo.email}}</view>
						</view>
					</view>
					
				</view>
				<view class="flex vip-bg justify-between align-center">
					<view class="taocan">
						<view class="title">
							我的「Ticket秘钥」
							<uni-icons :type="showTicketFlag ? 'eye-filled':'eye-slash-filled'" color="#ffffff" @click="changeTicketFlag"></uni-icons>
						</view>
						<view class="desc" v-if="userInfo.ticketEnable == 0">暂未开启，开启后生效</view>
						<view class="desc" v-else @click="copyTicket()">
							{{ showTicketFlag ? ticket:encryptTicket(ticket) }} 
						</view>
					</view>
					<button class="cu-btn" @click="changeTicket">{{userInfo.ticketEnable == 1 ? '禁用Ticket':'启用Ticket'}}</button>
				</view>
			</view>
			<view class="mine-list padding-lr">
				<view class="flex item align-center" v-if="userInfo.ticketEnable == 1" @click="restTicket()">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">重置Ticket秘钥</view>
						<view class="flex align-center">
							<!-- <view class="desc">重新生成</view> -->
							<uni-icons type="refreshempty" color="#848B9E" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view @click="toManage()" class="flex item align-center"  v-if="userInfo.isAdmin == 1">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">后台管理</view>
						<view class="flex align-center">
							<!-- <view class="desc">管理员菜单</view> -->
							<uni-icons type="right" color="#848B9E" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view @click="toAbout()" class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">关于我们</view>
						<view class="flex align-center">
							<!-- <view class="desc">管理员菜单</view> -->
							<uni-icons type="right" color="#848B9E" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<view @click="outLogin" class="flex item align-center">
					<view class="flex align-center justify-between solid-bottom margin-left-sm">
						<view class="title">退出登录</view>
						<view class="flex align-center">
							<!-- <view class="desc">提问的艺术</view> -->
						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb text-blue">
					当前版本:{{this.$version}}
				</view>
				
			</view>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="兑换码" :value="rede_code" placeholder="请输入兑换码"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<daxiang-getUserProfile ref="getUserProfile"></daxiang-getUserProfile>
			
			<uni-popup ref="changeUserInfoPopup" type="dialog">
				<view class="changeUserInfoView">
					<uni-forms ref="form" label-position="top">
						<uni-forms-item label="修改昵称:" name="realname">
							<uni-easyinput  v-model="realname" placeholder="请输入新昵称" />
						</uni-forms-item>
					</uni-forms>
					<button type="primary" size="mini" @click="modifyUserInfo">确定</button>
				</view>
			</uni-popup>
		</view>
</template>

<script>
	import api from "@/common/apiUtil.js"
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		data() {
			return {
				baseUrl: api.SERVER_BASE,
				isLogin: true,
				userInfo:{},
				ticket: null,
				showTicketFlag:false,
				rede_code:'',
				realname:'',
			}
		},
		computed:{
			
		},
		onLoad() {
		},
		onShow() {
		  this.getUserInfo()
		},
		methods: {
			changeName(){
				
			},
			getUserInfo(){
				this.$get(api.GET_USER_INFO).then(res=>{
					console.log(res)
					this.userInfo = res.result
					this.ticket = res.result.ticket
					uni.setStorageSync("userInfo",res.result)
				})	
			},
			onChooseAvatar(e){
				const that = this;
				uni.chooseImage({
				  count: 1,
				  mediaType: ['image'],
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
					uni.showLoading({
						title: '图片上传中...'
					});
					
					let token = uni.getStorageSync("token")
					uni.uploadFile({
						url: api.COMMON_UPLOAD,
						header: {
							"Authorization": token
						},
						//刚才用户选择的图片地址
						filePath: res.tempFilePaths[0],
						name: "file",
						success: res => {
							let data = JSON.parse(res.data);
							console.log(data.success)
							if (data.success) {
								uni.showToast({
									title: '上传成功',
									icon: "none"
								});
							}
							// 准备参数
							let userInfo = {
								avatar: data.result
							}
							console.log(userInfo)
							that.$put(api.PUT_MODIFY_USER_INFO,userInfo).then(res=>{
								console.log(res)
								that.getUserInfo();
							})
						}
					})
				  }
				})
			},
			toManage() {
				uni.navigateTo({
					url: '/pages/admin/admin',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onLoadPage(){
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
			},
			outLogin(){
				uni.showModal({
					title: '误触确认',
					content: '皇上，您点错了吧？',
					showCancel: true,
					cancelText: '朕误触',
					confirmText: '朕没错',
					success: res => {
						if(res.confirm){
							uni.clearStorageSync();
							uni.reLaunch({
								url:"/pages/login/login"
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			dialogInputConfirm(){
				
			},
			changeTicket(){
				uni.showLoading({
					title: '处理中...',
					mask: false
				});
				this.$get(api.CHANGE_SHARE_FLAG).then(res=>{
					console.log(res)
					uni.hideLoading();
				})
				this.getUserInfo();
			},
			encryptTicket(ticket){
				if(ticket == null){
					return "生成失败，请重新生成！";
				}
				console.log(ticket)
				return ticket.substring(0,5) + "****" + ticket.substring(ticket.length - 8,ticket.length);
			},
			changeTicketFlag(){
				let showTicket = this.showTicketFlag;
				let ticket = this.userInfo.ticket;
				if(showTicket){
					showTicket = false;
					ticket = this.encryptTicket(ticket)
				}else{
					showTicket = true;
				}
				this.showTicketFlag = showTicket;
				this.userInfo.ticket = ticket;
			},
			copyTicket(){
				if(!this.showTicketFlag){
					uni.showToast({
						title: '请先点开小眼睛后复制！',
						icon:"none"
					});
					return;
				}
				uni.setClipboardData({
					data: this.ticket,
					success: res => {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					}
				})
			},
			restTicket(){
				uni.showModal({
					title: '重置提示',
					content: '重置Ticket秘钥后，原秘钥会立马失效，新秘钥会立即生效！',
					showCancel: true,
					cancelText: '放弃重置',
					confirmText: '确定重置',
					success: res => {
						// 点击确定后重置
						if(res.confirm){
							this.$get(api.REST_TICKET).then(res=>{
								console.log(res)
								uni.showToast({
									title: '重置成功！',
									icon:"none"
								});
								this.ticket = res.result;
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toAbout(){
				uni.navigateTo({
					url: '/pages/about/about'
				});
			},
			modifyUserInfo(){
				console.log(this.userInfo.realname)
				console.log(this.realname)
				if(!this.realname){
					return;
				}
				if(this.realname == this.userInfo.realname){
					uni.showToast({
						title: '昵称未发生修改',
						icon:"none"
					});
					return;
				}
				this.$put(api.PUT_MODIFY_USER_INFO,{realname:this.realname}).then(res=>{
					console.log(res)
					uni.showToast({
						title: res.message,
						icon:"none"
					});
				})
				
				this.$refs.changeUserInfoPopup.close();
				setTimeout(()=>{
					this.getUserInfo()
				},500)
			},
			showModifyUserInfo(){
				this.realname = this.userInfo.realname;
				this.$refs.changeUserInfoPopup.open("center");
			},
		}
	}
</script>
<style>
	/*每个页面公共css */
	@import url("@/static/style/color-ui.css");
</style>
<style lang="scss">
	.login-btn {
		background-color: #62b900;
		width: 80%;
		border-radius: 15px;
		margin-top: 45%;
	}

	.head-bg {
		padding-top: var(--status-bar-height);
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 574rpx;

		.user-info {
			.head-img {
				width: 120rpx;
				height: 120rpx;
				
				border: 2px solid #959797 ;
			}

			.mobile {
				padding-left: 23rpx;
				color: #222222;
				.mobile_title{
					font-weight: bold;
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}
			}

			.info-edit {
				font-size: 24rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 18rpx;
				padding-right: 12rpx;
			}
		}

		.vip-bg {
			background-image: url("https://hy-qd-oss.oss-cn-qingdao.aliyuncs.com/chat/20230509/mine-vip-bg.png");
			background-repeat: no-repeat;
			background-size: 100%;
			// width: calc(100% - 60rpx);
			height: 133rpx;
			padding: 30rpx 24rpx 30rpx 30rpx;
			margin-top: 50rpx;

			.taocan {
				color: #ffffff;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 33rpx;
				}

				.desc {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					padding-top: 19rpx;
				}
			}

			.cu-btn {
				height: 48rpx;
				background: linear-gradient(90deg, #ffefc9 0%, #e9c98d 100%);
				border-radius: 24rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #863f18;
				line-height: 35rpx;
			}
		}
	}

	.mine-list {
		margin-top: -181rpx;

		button {
			border: none;
			margin: 0;
			padding: 0;
			background-color: inherit;
		}

		button::after {
			border: none;
		}

		.item {
			.solid-bottom {
				width: 100%;
			}

			.title {
				padding-top: 50rpx;
				padding-bottom: 50rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #141e34;
				line-height: 56rpx;
			}

			.desc {
				padding-right: 13rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 40rpx;
			}
		}
	}
	.avatar-img{
		width: 100%;
		height: 100%;
		object-fit:cover;
	}
	.bottom-btn{
		position: absolute;
		bottom: 150rpx;
		width: 100%;
		button{
			width: 80%;
			margin: 0px auto;
		}
	}
	.changeUserInfoView{
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx;
	}
</style>